<template>
    <div class="app-container">
        <div class="customContainer">
            <div class="customHeader">
                <div>
                    <b>{{house_name==null?store_name:house_name}}</b>-盘盈、盘亏明细
                    <span>&#x3000;&#x3000;&#x3000;上次时间:
                        <b>{{lasttime}}</b>&#x3000;本次时间:
                        <b>{{nowtime}}</b>
                    </span>
                </div>
            </div>
            <!-- 列表 -->
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column v-if="formInline.warehouse==3" align="center" label='机台号' width="60">
                    <template slot-scope="scope">
                        {{scope.row.area_name}}-{{scope.row.mno}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="礼品图片" width="80">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumb" width="60" height="60" alt="">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="新礼品编号" prop="gift_id"></el-table-column>
                <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
                <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
                <el-table-column align="center" label="上次盘点库存" prop="lastStock"></el-table-column>
                <el-table-column align="center" label="本次账面库存" prop="thisTheory"></el-table-column>
                <el-table-column align="center" label="本次盘点库存" prop="thisActual"></el-table-column>>
                <el-table-column align="center" label='礼品成本价'>
                    <template slot-scope="scope">
                        <!-- 保留小数 -->
                        {{scope.row.money_cost|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="盘盈" prop="checkMore"></el-table-column>
                <el-table-column align="center" label="盘亏" prop="checkLess"></el-table-column>
                <el-table-column align="center" label="盘盈金额（元）" prop="money_more"></el-table-column>
                <el-table-column align="center" label="盘亏金额（元）" prop="money_less"></el-table-column>
                <el-table-column align="center" label="备注" prop="remark"></el-table-column>
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box" v-if="list">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
            <el-button class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">报表导出<count-down ref="cd"/></el-button>
            <span class="pull-right mt10" style="font-size:14px;color:#606266">　盘盈 {{totle.checkMore}}　盘亏
                {{totle.checkLess}}　盘盈金额（元）{{totle.moneyMore}}　盘亏金额（元）{{totle.moneyLess}}&#x3000;&#x3000;</span>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        getExport,
    } from "@/api/storage_control/checkDetail_form";
    export default {
        data() {
            return {
                exportLoading: false,
                totle: {},
                store_name: '',
                house_name: '',
                lasttime: '',
                nowtime: '',
                list: null,
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 0,
                is_detail: true,
                houseList: [],
                formInline: {
                    store_id: '',
                    house_id: '',
                    time: ''
                },
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.list) {
                    vm.formInline.store_id = vm.$route.params.store_id;
                    vm.formInline.house_id = vm.$route.params.house_id;
                    vm.formInline.time = vm.$route.params.time;
                    vm.fetchData();
                }
            })
        },
        watch: {
            '$route'(to, from) {
                if (this.$route.params.store_id != this.formInline.store_id && this.$route.params.house_id != this.formInline.house_id && this.$route.params.time != this.formInline.time) {
                    this.formInline.store_id = this.$route.params.store_id;
                    this.formInline.house_id = this.$route.params.house_id;
                    this.formInline.time = this.$route.params.time;
                    this.fetchData();
                }
            }
        },
        methods: {
            // 导出
            exportClick() {
                getExport(this.formInline)
                this.exportLoading = true;
                this.$refs.cd.countDownF(30).then(() => {
                    this.exportLoading = false;
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    getList(this.formInline).then(response => {
                        this.totle = response.totle;
                        this.store_name = response.store_name;
                        this.house_name = response.house_name;
                        this.lasttime = response.lasttime;
                        this.nowtime = response.nowtime;
                        this.list = response.data;
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response.data;
                    this.listLoading = false;
                });
            },
        }
    };
</script>